<template>
    <div>
        <v-bill-card-base v-for="bill in bills.body" :key="bill.no" :bill="bill">
            <template slot-scope="{bill}" slot="opera">
                <el-button type="text" @click="$router.push(`./detail/${bill.id}`)" v-if="bill.billStatus === 0 || bill.billStatus === 1"><i
                        class="iconfont icon-xiangqing"></i>详情
                </el-button>
                <el-button type="text" @click="$router.push(`/bill-service/financing/single?id=${bill.id}`)" v-if="(bill.billStatus === 0 || bill.billStatus === 3) && userInfo.roleType === 2"><i
                    class="iconfont icon-bianji"></i>编辑
                </el-button>
                <el-button type="text" @click="employDelete(`${bill.id}`)" v-if="bill.billStatus === 3 && userInfo.roleType === 2"><i
                    class="iconfont icon-shanchu"></i>删除
                </el-button>
            </template>
            <template slot-scope="{bill}" slot="tips">
                <span>{{$utils.toTypeFormat(bill.billStatus,$dict.billAuthTypes)}}</span>
                <p>
                    <el-button type="primary" v-if="bill.billStatus === 0 && userInfo.roleType ===2" @click="$router.push(`./audit/${bill.id}`)">
                        审核
                    </el-button>
                </p>
            </template>
        </v-bill-card-base>
        <div class="operation pageation">
            <b></b>
            <el-pagination
                    @current-change="change"
                    :current-page="bills.footer.currentPage"
                    layout="total, prev, pager, next"
                    :page-size="10"
                    :total="bills.footer.total">
            </el-pagination>
        </div>
    </div>
</template>
<script lang="ts">
  import { Vue, Component, Emit } from 'vue-property-decorator'

  import vBillCardBase from '@/components/bill-card-base/index.vue'
  import { Getter } from 'vuex-class'

  @Component({
    components: {
      vBillCardBase
    },
    props: ['bills']
  })
  export default class BillCardOrder extends Vue {
    @Getter userInfo
    mounted() {
        console.log(this.bills)   
    }
    @Emit()
    change (currentPage) {
    }
    employDelete (billId) {
        this.$emit('emitDeleteBill',billId)
    }
  }
</script>
<style lang="less" scoped>
    .expand {
        height: 84px;
        display: flex;
        flex-direction: row;
        background: #F5F7FA;
        line-height: 84px;
        .item {
            flex: 1;
            div {
                line-height: 42px;
                font-size: 16px;
                text-align: center;
            }
            .label {
                color: #999;
            }
        }
    }

    .iconfont {
        font-size: 14px;
        margin-right: 4px;
    }
</style>


